<!DOCTYPE html>
<html>
	
	
	<head>
		
		<style>
						
			    @font-face {
			        font-family: 'FontAwesome';
			        src: url('./fontawesome-webfont.eot');
			        src: url('./fontawesome-webfont.eot') format('embedded-opentype'),
			            url('./fontawesome-webfont.woff2') format('woff2'), url('.fontawesome-webfont.woff') format('woff'),
			            url('./fontawesome-webfont.ttf') format('truetype'),
			            url('./fontawesome-webfont.svg') format('svg');
			        font-weight: normal;
			        font-style: normal;
			    }
			
			    .search-box {
			        font-family: FontAwesome;
			        position: absolute;
			        top: 30%;
			        left: 50%;
			        transform: translate(-50%, -50%);
			        background: #ffffff;
			        height: 40px;
			        border: 10px;
			        border-radius: 40px;
			        padding: 10px;
			        opacity: 0;
			        transition-delay: 99999999s;
			        transition-duration: 1s;
			    }
			
			    .search-box:hover>.search-txt {
			        width: 240px;
			        padding: 0 6px;
			    }
			
			    .search-box:hover>.search-btn {
			        color: white;
			        background: black;
			    }
			
			    .search-btn {
			        transition: 0.5s;
			        font-family: FontAwesome;
			        font-size: 25px;
			        color: black;
			        float: right;
			        width: 40px;
			        height: 40px;	
			        border: 10px;
			        border-radius: 50%;
			        background: #ffffff;
			        display: flex;
			        justify-content: center;
			        align-items: center;
			        text-decoration: none;
			    }
			
			    .search-txt {
			        border: none;
			        background: none;
			        outline: none;
			        float: left;
			        padding: 0;
			        color: rgb(51, 159, 150);
			        font-size: 16px;
			        transition: 0.6s;
			        line-height: 50px;
			        width: 0px;
			    }
			   
			    @keyframes flash {
			        50% {
			            transform: scale(1.5);
			        }
			
			        80% {
			            transform: rotate(-60deg);
			        }
			
			        100% {
			            transform: rotate(30deg);
			        }
			        
			        
			    }
			    html:hover .search-box {
			        opacity: 1;
			        transition-delay: 0s;
			        transition-duration: 0s;
			    }
				
		</style>
	</head>

	<body style="background-color: white;">
		
		<center>
		    <div class="search-box">
		        <input class="search-txt" type='text' id='inp' placeholder="What are you looking for?"/>
		        <input class="search-btn" type='button' id='btn' value='&#xf002' />
		    </div>

		</center>
		
		
	</body>
	
	
	<script>
	    var oInp = document.getElementById('inp');
	    var oBtn = document.getElementById('btn');
	
	    oBtn.onclick = function () {
	        Search();
	    }
	
	    document.onkeydown = function () {
	        if (event.keyCode == 13) {
	            Search();
	        }
	    }
	
	    function Search() {
	        var url = 'https://www.baidu.com/s?wd=' + oInp.value;
	        window.open(url);
	    }
	</script>

	</html>
